import { View } from '@tarojs/components';
import React from 'react';
import './Radio.scss';

interface IZbRadioAnswerProps {
  item: { key: string; value: string }[];
}

const ZbRadioAnswer = (props: IZbRadioAnswerProps) => {
  const { item } = props;
  const [curSelect, setCurSelect] = React.useState<string[]>([]);

  const onSelect = (e: any, key: string) => {
    console.log('e', e);
    e.stopPropagation();
    setCurSelect([key]);
  };
  return (
    <View className="radio-answer">
      {item.map((it: { key: string; value: string }) => (
        <View
          key={it.key}
          className="pb-3 flex self-start"
          onClick={(e) => {
            onSelect(e, it.key);
          }}
        >
          <View
            className={`radio-answer-item text-xs ${
              curSelect.length > 0 && curSelect[0] === it.key
                ? 'text-white bg-green-700'
                : 'text-green-600'
            } `}
          >
            {it.key}
          </View>
          <View className="text-lg ">{it.value}</View>
        </View>
      ))}
    </View>
  );
};

export default ZbRadioAnswer;
